import { useLocation, useSearchParams } from 'react-router-dom'
import MyNavBar from '../../components/navbar'
import TicketCard from '../train/components/TicketCard'
import OrderFooter from './components/OrderFooter'
import ChoosePsg from './components/ChoosePsg'
import ChooseSeat from './components/ChooseSeat'
import { Form } from 'antd-mobile'
import { FormContext } from './formCtx'
import styles from './css/order.module.css'

function Order() {
  // 在父组件中，创建 form 引用对象
  const [form] = Form.useForm()
  const [sp] = useSearchParams()
  // 使用 useLocation() 这个 Hook 获取路由跳转时，通过 state 携带的数据
  const location = useLocation()
  // info 就是车次的详情数据
  const info = location.state

  return (
    // 通过上下文，向下共享 form 这份数据
    <FormContext.Provider value={form}>
      <div className={styles.box}>
        {/* 导航栏 */}
        <MyNavBar title="订单填写" />

        {/* 车次的卡片 */}
        <TicketCard {...info} />

        {/* 坐席类别 */}
        <div className={styles.seatType}>
          <span>坐席</span>
          <span>
            <span>{sp.get('seatType')}</span>
            <span className={styles.price}>&yen;{sp.get('price')}</span>
          </span>
        </div>

        {/* 选择乘客 */}
        <ChoosePsg />

        {/* 选择座位 */}
        <ChooseSeat />

        {/* 底部的 Footer 区域 */}
        <OrderFooter {...info} />
      </div>
    </FormContext.Provider>
  )
}

export default Order
